<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<base th:href="${#request.getContextPath()}+'/'">
		   <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }
        /*1.进入到分院详情时，需要查询分院所在位置，
         然后将分院位置填入函数中，其他信息获取到也应该存到弹出
         框中*/
        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=a1661afb10b214933c08f95f60668d52"></script>
		<script>
			var zhi;
			var lng;
            var lat;
			$(function(){
				markLocation('container', '天府三街');
			});
			var map = new AMap.Map('container', {
        resizeEnable: true
    });
    //获取当前定位
    	AMap.plugin('AMap.Geolocation', function() {
        var geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 10000,          //超过10秒后停止定位，默认：5s
            buttonPosition:'RB',    //定位按钮的停靠位置
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            panToLocation: true,
            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition(function(status,result){
        	zhi=result.position;
        	alert("当前位置"+zhi)
        });
    });
    //设置酒店的位置
			function markLocation(mapId, address) {
    	AMap.plugin('AMap.Geocoder', function() {
    		
        var geocoder = new AMap.Geocoder();            
        geocoder.getLocation(address, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
                // 经纬度                      
                lng = result.geocodes[0].location.lng;
                lat = result.geocodes[0].location.lat;
                alert("这是"+lng+","+lat)

                // 地图实例
                var map = new AMap.Map(mapId, {
                    resizeEnable: true, // 允许缩放
                    center: [lng, lat], // 设置地图的中心点
                    zoom: 15 　　　　　　 // 设置地图的缩放级别，0 - 20
                });
                        
                // 添加标记
                var marker = new AMap.Marker({
                    map: map,
                    position: new AMap.LngLat(lng, lat),   // 经纬度
                });
            marker.setMap(map);
             //鼠标点击marker弹出自定义的信息窗体
    AMap.event.addListener(marker, 'click', function () {
        infoWindow.open(map, marker.getPosition());
    });
		    //设置鼠标划过点标记显示的文字提示
		    marker.setTitle("成都大酒店");
		    marker.setLabel({
		        offset: new AMap.Pixel(10, 20),
		    });
            } else {
                console.log('定位失败！');
            }
        });
    });
}
				//实例化信息窗体
var title = '成都大酒店',
    content = [];
content.push("<img src='http://tpc.googlesyndication.com/simgad/5843493769827749134'>地址：成都市高新区环球中心3层202号");
content.push("电话：010-64733333");
var infoWindow = new AMap.InfoWindow({
    isCustom: true,  //使用自定义窗体
    content: createInfoWindow(title, content.join("<br/>")),
    offset: new AMap.Pixel(16, -45)
});

//构建自定义信息窗体
function createInfoWindow(title, content) {
    var info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";

    //可以通过下面的方式修改自定义窗体的宽高
    //info.style.width = "400px";
    // 定义顶部标题
    var top = document.createElement("div");
    var titleD = document.createElement("div");
    var closeX = document.createElement("img");
    top.className = "info-top";
    titleD.innerHTML = title;
    closeX.src = "https://webapi.amap.com/images/close2.gif";
    closeX.onclick = closeInfoWindow;
    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);

    // 定义中部内容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = 'white';
    middle.innerHTML = content;
    info.appendChild(middle);

    // 定义底部内容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    var sharp = document.createElement("img");
    sharp.src = "https://webapi.amap.com/images/sharp.png";
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
}
		//关闭信息窗体
		function closeInfoWindow() {
   		map.clearInfoWindow();
		}
			//规划路线
			function mypath(zhi){
				location.href="https://m.amap.com/navi/?start="+zhi+"&dest="+lng+","+lat+"&destName=成都大酒店&naviBy=car&key=a1661afb10b214933c08f95f60668d52";
			}
			
	</script>
	</head>
	<body>
		<div id="container" style="height: 300px;width: 1400px;">
			</div>
		<button onclick="mypath(zhi)">去这里</button>
	</body>
</html>
